<template>
  <div class="table-left">
    <AElTable :data="data" :columns="columns" max-height="500" highlight-current-row fixed
      @selection-change="selectionChange" :border="false">
      <AElPagination slot="pagination" :pageSize="pageSize" @change="change" />
    </AElTable>
  </div>
</template>

<script>
import moment from 'moment';
import { getTreatment } from '@/api/treatmentAppointmentBatch';
export default {
  name: 'TableLeftTreatment',
  props: {
    form: { type: Object, default: () => ({}) }, // 表单数据
    patientTypeList: { type: Array, default: () => ([]) }, // 就诊类型
  },
  data() {
    return {
      data: [], // 表格数据
      columns: [],// 表格行配置项
      selectData: [], // 选中的列表数据
      pageSize: { page: 1, size: 10, total: 0 }, // 分页配置
    }
  },
  created() {
    this.getData();
    this.setColumns();
  },
  watch: {
    form: {
      deep: true,
      handler: function () {
        this.getData();
      }
    }
  },
  methods: {
    /**
     * 选择框事件
     */
    selectionChange(data) {
      this.selectData = data;
      let { tableChange } = this.$listeners;
      tableChange && tableChange(this.selectData);
    },
    /**
     * 分页数据改变事件
     */
    change(data) {
      this.pageSize = { ...this.pageSize, ...data };
      this.getData();
    },
    /**
     * 设置表格配置
     */
    setColumns() {
      this.columns = [
        {
          fixed: true,
          type: "selection",
          label: "全选",
          width: "50px"
        },
        {
          prop: "applyTime",
          label: "开单时间",
          minWidth: "150px",
          render: ({ row }) => moment(row.applyTime).format('YYYY-MM-DD HH:mm:ss')
        },
        {
          prop: "patientName",
          label: "姓名",
          // minWidth: "150px"
        },
        {
          align: "right",
          width: "40px",
          fixed: "right",
          render: ({ row }) => {
            switch (row.newFlag) {
              case 1: return <div class="new"><div class="block">新</div></div>
              default: return null
            }
          }
        },
        {
          // align: "right",
          prop: "patientType",
          label: "类型",
          width: "60px",
          fixed: "right",
          formatter: row => {
            let data = this.patientTypeList.find(item => item.value == row.patientType);
            return data.label;
          }
        }
      ]
    },
    /**
     * 获取患者列表
     */
    getData() {
      // 获取分页数据
      let { total, ...rest } = this.pageSize;
      // 将日期解构出来特殊处理
      let { date = [], ...restForm } = this.form;
      // 对日期进行解构
      let [applyTimeBegin = null, applyTimeEnd = null] = date;
      // 将数据合并
      let form = { ...restForm, ...rest, applyTimeBegin, applyTimeEnd };
      // 将loading状态开启
      this.$attrs.setLoading(true);
      getTreatment(form).then(({ content = [], totalElements = 0 }) => {
        // 将loading状态关闭
        this.$attrs.setLoading(false);
        this.data = content;
        this.pageSize.total = totalElements;
      });
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('index.scss');
</style>
